<script lang="ts" setup>
import { useRouter } from "vue-router";
import dayjs from "dayjs";

const router = useRouter();

const props = defineProps<{
  order: OrderListResp;
}>();

/** 订单状态 */
const orderStatus = computed(() => {
  return {
    1: {
      tag: {
        color: "#FF9900",
        textColor: "#FFFFFF",
      },
      text: "待支付",
    },
    2: {
      tag: {
        color: "#4fc08d",
        textColor: "#FFFFFF",
      },
      text: "已支付",
    },
    3: {
      tag: {
        color: "#E9E9E9",
        textColor: "#999999",
      },
      text: "已取消",
    },
  }[props.order.status];
});

const gotoDetail = () => {
  // 跳转到详情页
  router.push(`/order/${props.order.orderNo}`);
};
</script>

<template>
  <div class="p-3 bg-white rd-3 flex gap-3" @click="gotoDetail">
    <nut-image class="w-20 h-20" :src="props.order.skuPicUrl" />
    <div class="flex-1">
      <div class="flex justify-between">
        <span>{{ props.order.skuName }}</span>
        <nut-tag
          :color="orderStatus?.tag.color"
          :textColor="orderStatus?.tag.textColor"
          >{{ orderStatus?.text }}</nut-tag
        >
      </div>

      <div class="my-1 text-sm c-gray-4">订单号: {{ props.order.orderNo }}</div>

      <div class="my-1 flex justify-between text-sm c-gray-5">
        <span>共 {{ props.order.amount }} 个</span>
        <span class="text-base"
          ><span class="text-xs">￥</span
          >{{ props.order.orderPrice / 100 }}</span
        >
      </div>

      <div class="text-sm c-gray-4">
        下单时间:
        {{ dayjs(props.order.createTime).format("YYYY-MM-DD HH:mm") }}
      </div>

      <div v-if="props.order.payTime" class="text-sm c-gray-4">
        支付时间: {{ dayjs(props.order.payTime).format("YYYY-MM-DD HH:mm") }}
      </div>
    </div>
  </div>
</template>
